<template>
  <div>
    <table>
      <tr>
        <th>
          <input type="checkbox" @click="all" ref="ipt" />
        </th>
        <th>产品图片</th>
        <th>编号</th>
        <th>品牌名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="index" ref="t">
        <td>
          <input type="checkbox" v-model="k" :value="item.brand" ref="ip" />
        </td>
        <td><img :src="item.Image" alt="" /></td>
        <td>{{ item.id }}</td>
        <td>{{ item.brand }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="jian(index)">-</button> {{ item.num }}
          <button @click="add(index)">+</button>
        </td>
        <td>
          <p @click="del(index)">删除</p>
        </td>
      </tr>
    </table>
    <div id="d3" v-if="!arr.length">全部删除了</div>
    <p>选中删除：<button @click="ddd" ref='b'>删除</button></p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$on("get", (input) => {
      this.arr.push(input);
      
    });
    this.$bus.$on("git", (input) => {
this.$refs.b.disabled = true
      this.arr.forEach((item, index) => {
        console.log(item);
        this.$refs.t[index].style.display = "none";
        if (item.brand === input) {
          this.$refs.t[index].style.display = "";
          this.sum++;
        }
      });
      if (this.sum === 0) {
        this.arr.forEach((item, index) => {
          this.$refs.t[index].style.display = "";
          this.sum = 0;
        });
        alert("没有符合的产品");
      }
    });
    this.$bus.$on("gt", (input) => {
        this.$refs.b.disabled = false
      this.arr.forEach((item, index) => {
        this.$refs.t[index].style.display = "";
      });
    });
  },
  methods: {
    del(index) {
      this.arr.splice(index, 1);
      // this.arr.forEach((item, index) => {
      //   this.$refs.t[index].style.display = "";
      // });
    },
    all() {
      console.log(this.$refs);
      if (this.$refs.ipt.checked) {
        this.$refs.ip.forEach((item) => {
          item.checked = true;
          if (this.k.indexOf(item.value) == -1) {
            this.k.push(item.value);
          }
        });
      } else {
        this.$refs.ip.forEach((item) => {
          item.checked = false;
          this.k = [];
        });
      }
    },
    ddd() {
      this.k.forEach((item) => {
        this.arr.forEach((it, index) => {
          if (item === it.brand) {
            this.arr.splice(index, 1);
          }
        });
      });
      this.kk = [];
      this.$refs.ipt.checked = false;
    },
    add(index) {
      this.arr[index].num++;
    },
    jian(index) {
      this.arr[index].num--;
      if (!this.arr[index].num) {
        this.arr.splice(index, 1);
      }
    },
  },
  data() {
    return {
      sum: 0,
      k: [],
      arr: [
        {
          Image:
            "https://img0.baidu.com/it/u=3566290140,983716746&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=737",
          id: 1,
          brand: "奥迪",
          key: Math.random().toString(32).substring(2),
          price: 50,
          num: 1,
        },
        {
          Image:
            "https://img0.baidu.com/it/u=1854924871,1736575892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=654",
          id: 2,
          brand: "奔驰",
          key: Math.random().toString(32).substring(2),
          price: 50,
          num: 1,
        },
        {
          Image:
            "https://img1.baidu.com/it/u=3818993677,657290096&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=434",
          id: 3,
          brand: "宝马",
          key: Math.random().toString(32).substring(2),
          price: 50,
          num: 1,
        },
      ],
    };
  },
};
</script>

<style>
th {
  background-color: violet;
  width: 70px;
}

td {
  width: 70px;
  height: 40px;
  text-align: center;
  border: 1px solid;
}

img {
  width: 40px;
  height: 40px;
}
table {
  border: 2px solid black;
  width: 100%;
}
#d3 {
  border: 1px solid;
  text-align: center;
  height: 40px;
  background-color: blue;
  line-height: 40px;
}

td button {
  font-size: 20px;
  width: 20px;
}
</style>